
<template>
  <ex-dialog width="800px" class="ex-diolog" :title="title" :visible="visible" @closeDialog="handleClose">
    <!-- 神椰板块 -->
    <div class="main" v-if="pathType == 'shenye'">
      <p class="text" style="margin-bottom: 14px">
        开通神椰板块，店铺可在神椰前端显示，并且可挂售平台产品，开启神椰店铺权益核销功能。
      </p>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <template v-if="type == 2">
          <el-form-item label="登录手机号：" prop="phone">
            <el-input type="text" v-model="ruleForm.phone" placeholder="填写手机号" maxlength="11"></el-input>
          </el-form-item>

          <el-form-item label="登录密码：" prop="password">
            <el-input show-password v-model="ruleForm.password" autocomplete="new-password"
              placeholder="填写登录密码"></el-input>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button @click="handleClose('ruleForm')">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认开通</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- end -->
    <!-- 开通日常收款/存管账户 -->
    <div class="main" v-if="pathType == 'zijin'">
      <p class="text">
        点击开通后在商户进件功能中可选择开通以下功能
      </p>
      <p class="text">
        1、开通日常收款，可在卡优优预付、神椰商户端中获取收款码进行日常收款操作。
      </p>
      <p class="text" style="margin-bottom: 14px">
        2、开通存管账户，可在卡优优预付发行预付卡。
      </p>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <template v-if="type == 2">
          <el-form-item label="登录手机号：" prop="phone">
            <el-input type="text" v-model="ruleForm.phone" placeholder="填写手机号" maxlength="11"></el-input>
          </el-form-item>

          <el-form-item label="登录密码：" prop="password">
            <el-input show-password v-model="ruleForm.password" autocomplete="new-password"
              placeholder="填写登录密码"></el-input>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button @click="handleClose('ruleForm')">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认开通</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- end -->
    <!-- nfr -->
    <div class="main" v-if="pathType == 'nfr'">
      <p class="text" style="margin-bottom: 40px">
        开通神椰板块，店铺可在神椰前端显示，并且可挂售平台产品，开启神椰店铺权益核销功能
      </p>
      <el-form :model="filter" status-icon :rules="filterRules" ref="filter" :label-width="labelWidth"
        class="demo-ruleForm">
        <!-- <el-form-item label="关联发行方：" prop="issuerId" key="1">
            <el-select v-model="filter.issuerId" placeholder="请选择" :disabled="!isAdd" style="width: 250px;">
              <el-option v-for="item in issuerList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item> -->
        <el-form-item label="赚卡服务费：" prop="equityFee" key="2">
          <el-input type="text" v-model="filter.equityFee" placeholder="填输入售卡服务费" :style="{ width: inputWidth }">
            <template slot="append">%</template></el-input>
        </el-form-item>
        <p class="text" style="margin-bottom: 20px">结算信息</p>
        <el-form-item label="结算方式：" prop="" key="3">
          <el-select filterable v-model="filter.nfrSettleType" placeholder="请选择" clearable :style="{ width: inputWidth }">
            <el-option v-for="item in settleMethodLs" :key="item.id" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>
        <template v-if="filter.nfrSettleType!=''">
          <el-form-item label="开户名称：" prop="nfrSettleBankAccountName" key="4">
            <el-input type="text" v-model="filter.nfrSettleBankAccountName" placeholder="请输入"
              :style="{ width: inputWidth }"></el-input>
          </el-form-item>
          <el-form-item label="银行名称：" prop="nfrSettleBank" key="5">
            <el-input type="text" v-model="filter.nfrSettleBank" placeholder="请输入"
              :style="{ width: inputWidth }"></el-input>
          </el-form-item>
          <el-form-item label="开户行卡号：" prop="nfrSettleBankNo" key="6">
            <el-input type="text" v-model="filter.nfrSettleBankNo" placeholder="请输入"
              :style="{ width: inputWidth }"></el-input>
          </el-form-item>

          <el-form-item label="所属开户行：" prop="nfrSettleBankBranch" key="7">
            <el-input type="text" v-model="filter.nfrSettleBankBranch" placeholder="请输入"
              :style="{ width: inputWidth }"></el-input>
          </el-form-item>
          <el-form-item label="银行预留手机号：" prop="nfrSettleBankPhone" v-if="filter.nfrSettleType != 1" key="8">
            <el-input type="text" v-model="filter.nfrSettleBankPhone" placeholder="请输入"
              :style="{ width: inputWidth }" @input="checkPosInteger($event, 'nfrSettleBankPhone', 11)"></el-input>
          </el-form-item>
          <el-form-item label="银行卡正反面：" v-if="filter.nfrSettleType != 1" required>
            <el-row>
              <el-col :span="6">
                <el-form-item prop="nfrSettleBankImg" key="9">
                  <div style="display:flex;align-items:center;flex-direction:column;">
                    <el-checkbox-group v-model="filter.nfrSettleBankImg" v-show="false"></el-checkbox-group>
                    <ImageUploadMoreOldUrl :limit="1" :fileSize="20" v-model="filter.nfrSettleBankImg" :isShowTip="false">
                    </ImageUploadMoreOldUrl>
                    <span>正面</span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item prop="nfrSettleBankImgBack" key="10">
                  <div style="display:flex;align-items:center;flex-direction:column;">
                    <el-checkbox-group v-model="filter.nfrSettleBankImgBack" v-show="false"></el-checkbox-group>
                    <ImageUploadMoreOldUrl :limit="1" :fileSize="20" v-model="filter.nfrSettleBankImgBack" :isShowTip="false">
                    </ImageUploadMoreOldUrl>
                    <span>反面</span>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="开户许可证：" prop="licence" v-if="filter.nfrSettleType == 1" key="11">
            <el-checkbox-group v-model="filter.licence" v-show="false"></el-checkbox-group>
            <ImageUploadMoreOldUrl :limit="1" :fileSize="20" v-model="filter.licence" :isShowTip="false">
            </ImageUploadMoreOldUrl>
          </el-form-item>
          <el-form-item label="法人授权函信息：" prop="settleAuthorization" v-if="filter.nfrSettleType == 3" key="11">
            <el-checkbox-group v-model="filter.settleAuthorization" v-show="false"></el-checkbox-group>
            <ImageUploadMoreOldUrl :limit="1" :fileSize="20" v-model="filter.settleAuthorization" :isShowTip="false">
            </ImageUploadMoreOldUrl>
          </el-form-item>
        </template>
        <!-- <el-form-item label="结算银行："  prop="nfrSettleBank">
             <el-input type="text" v-model="filter.nfrSettleBank" placeholder="填输入结算银行" style="width: 250px;"></el-input> 
          </el-form-item>
          <el-form-item label="结算银行卡号："  prop="nfrSettleBankNo">
             <el-input type="text" v-model="filter.nfrSettleBankNo" placeholder="填输入结算银行卡号" style="width: 250px;" @input="checkPos($event,'nfrSettleBankNo')"></el-input> 
          </el-form-item>
          <el-form-item label="银行预留手机号："  prop="nfrSettleBankPhone">
             <el-input type="text" v-model="filter.nfrSettleBankPhone" placeholder="填输入银行预留手机号" style="width: 250px;" @input="checkPosInteger($event,'nfrSettleBankPhone',11)"></el-input> 
            </el-form-item> -->
        <el-form-item>
          <el-button @click="handleClose('ruleForm')">取消</el-button>
          <el-button type="primary" @click="submitfilter('filter')" v-if="isAdd">确认开通</el-button>
          <el-button type="primary" @click="submitfilterEdit('filter')" :loading="buttonLoading"
            v-else-if="isAdd == false">确认修改</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- end -->
  </ex-dialog>
</template>
<script>
// components
import Loading from "@/components/Loading/index";
import ImageUploadMoreOldUrl from "@/components/ImageUploadMoreOldUrl"
// api
import { moduleOpen, issuerSelect, moduleNfrOpen, moduleNfrEquityFee, getNfrMsg, updateNfrMsg } from "@/api/merchants/merchantsFunction";

export default {
  components: {
    Loading,
    ImageUploadMoreOldUrl
  },
  props: {
    visible: Boolean,
    id: {
      type: String,
      default: ''
    },
    dataItem: {
      type: Object,
      default: {}
    },
    isAdd: {
      type: Boolean,
      value: true,
    },
    pathType: String,
  },
  data() {
    var checkPassword = (rule, value, callback) => {
      var reg = /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,12}$/;
      if (!value) {
        console.log('111111111111', value)
        return callback(new Error('请输入密码'));
      } else if (value.match(reg) == null) {
        return callback(new Error('密码必须包含英文字母和数字且长度为6至12位'));
      } else {
        callback();
      }
    };
    var checkNum = (rule, value, callback) => {
      if (value < 0) {
        return callback(new Error('只可填写数值（0-100），可保留两位小数'));
      } else if (value > 100) {
        return callback(new Error('只可填写数值（0-100），可保留两位小数'));
      } else {
        callback();
      }
    };

    return {
      labelWidth: '140px',
      inputWidth: '280px',
      title: '开通神椰板块',
      loading: false,
      buttonLoading: false,
      data: {},
      input: "",
      // id:'',
      type: '',
      ruleForm: {
        phone: '',
        password: '',//密码
        function: '',
      },
      filter: {
        // issuerId: '',//关联发行方
        equityFee: '',//赚卡服务费率
        nfrSettleType: '',//结算方式
        nfrSettleBankAccountName: '',//开户名称
        nfrSettleBank: '',//银行名称
        nfrSettleBankNo: '',//开户行卡号
        nfrSettleBankBranch: '',//所属开户行
        nfrSettleBankPhone: '',//银行预留手机号
        nfrSettleBankImg: '',//银行卡正面
        nfrSettleBankImgBack: '',//银行卡反面
        licence: '',//开户许可证
        settleAuthorization: '',//法人/非法人结算授权书
      },
      issuerList: [],
      settleMethodLs: [], //结算方式字典
      rules: {
        phone: [
          { required: true, message: '请填写手机号', trigger: ['change', 'blur'] }
        ],
        password: [
          { required: true, validator: checkPassword, trigger: ['change', 'blur'] }
        ],
      },
      filterRules: {
        // issuerId: [
        //   { required: true, message: '请选择', trigger: ['change', 'blur'] }
        // ],
        equityFee: [
          { required: true, message: '请输入赚卡服务费', trigger: ['change', 'blur'] },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: '只可填写数值（0-100），可保留两位小数'
          },
          { validator: checkNum }
        ],
        licence: [
          { required: true, message: '请上传开户许可证', trigger: 'change' }
        ],
        nfrSettleBankAccountName: [
          { required: true, message: '请输入开户名称', trigger: ['change', 'blur'] }
        ],
        nfrSettleBank: [
          { required: true, message: '请输入银行名称', trigger: ['change', 'blur'] }
        ],
        nfrSettleBankNo: [
          { required: true, message: '请输入开户行卡号', trigger: ['change', 'blur'] }
        ],
        nfrSettleBankBranch: [
          { required: true, message: '请输入所属开户行', trigger: ['change', 'blur'] }
        ],
        nfrSettleBankPhone: [
          { required: true, message: '请输入银行预留手机号', trigger: ['change', 'blur'] }
        ],
        nfrSettleBankImg: [
          { required: true, message: '请上传银行卡正面', trigger: 'change' }
        ],
        nfrSettleBankImgBack: [
          { required: true, message: '请上传银行卡反面', trigger: 'change' }
        ],
        settleAuthorization: [
          { required: true, message: '请上传法人授权函', trigger: 'change' }
        ],
      },
    };
  },
  computed: {},
  created() {
    this.getAdminDict()
    let query = this.$route.query;
    this.id = query.id
    console.log(this.dataItem)
    this.type = query.type
    if (this.pathType == 'shenye') {
      this.title = '开通神椰板块'
      this.ruleForm.function = 2
    } else if (this.pathType == 'zijin') {
      this.title = '开通日常收款&存管账户'
      this.ruleForm.function = 1
    } else if (this.pathType == 'nfr') {
      // this.getIssuerSelect()
      this.getNfrMsg()
      if (this.isAdd == true) {
        this.title = '开通神椰板块'
      }

    }
  },
  methods: {
    //获取结算信息
    getNfrMsg() {
      getNfrMsg(this.id).then((res) => {
        if (res.result.merchantType == 1) {
          this.settleMethodLs.splice(2, 1);
        }
        this.filter.equityFee = res.result.equityFee
        this.filter.licence = res.result.licence
        this.filter.nfrSettleType = res.result.nfrSettleType
        this.filter.nfrSettleBankAccountName = res.result.nfrSettleBankAccountName
        this.filter.nfrSettleBank = res.result.nfrSettleBank
        this.filter.nfrSettleBankNo = res.result.nfrSettleBankNo
        this.filter.nfrSettleBankBranch = res.result.nfrSettleBankBranch
        this.filter.nfrSettleBankPhone = res.result.nfrSettleBankPhone
        this.filter.nfrSettleBankImg = res.result.nfrSettleBankImg
        this.filter.nfrSettleBankImgBack = res.result.nfrSettleBankImgBack
        this.filter.settleAuthorization = res.result.settleAuthorization
      })
    },
    // 
    getIssuerSelect() {
      issuerSelect().then((res) => {
        this.issuerList = res.result
        if (this.isAdd == false) {
          //  this.title = '开通神椰板块'
          // this.filter.issuerId = this.dataItem.nfrIssuerId
          this.filter.equityFee = this.dataItem.equityFee
        }
        //  this.filter.nfrSettleBank = this.dataItem.nfrSettleBank
        //  this.filter.nfrSettleBankNo = this.dataItem.nfrSettleBankNo
        //  this.filter.nfrSettleBankPhone = this.dataItem.nfrSettleBankPhone
        this.filter.nfrSettleType = this.dataItem.nfrSettleType
        this.filter.nfrSettleBankAccountName = this.dataItem.nfrSettleBankAccountName
        this.filter.nfrSettleBank = this.dataItem.nfrSettleBank
        this.filter.nfrSettleBankNo = this.dataItem.nfrSettleBankNo
        this.filter.nfrSettleBankBranch = this.dataItem.nfrSettleBankBranch
        this.filter.nfrSettleBankPhone = this.dataItem.nfrSettleBankPhone
        this.filter.nfrSettleBankImg = this.dataItem.nfrSettleBankImg
        this.filter.nfrSettleBankImgBack = this.dataItem.nfrSettleBankImgBack
        //  this.filter.permitForBankAccount = this.dataItem.permitForBankAccount
      })
    },
    //获取字典
    getAdminDict() {
      var dictType = "manage_settle_bank_type";
      this.$getSelectList(dictType)
        .then((res) => {
          this.settleMethodLs = res.result[0].dictList;
          this.settleMethodLs.splice(3, 3);
        })
    },
    // 大于0的正整数，可限制整数位
    checkPosInteger(value, name, integerMax) {
      let reg = new RegExp(`^(\\d{${integerMax}}).*$`)
      var data = value.replace(/^(0+)|[^\d]+/g, '').replace(reg, '$1')
      this.filter[name] = data
    },
    // 大于0的正整数，可限制整数位
    checkPos(value, name) {
      // let reg = new RegExp(`^(\\d{${integerMax}}).*$`)
      var data = value.replace(/^(0+)|[^\d]+/g, '')
      this.filter[name] = data
    },
    //确认开通
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log('valid', valid)
        if (valid) {
          let data = {
            id: this.id,
            ...this.ruleForm
          }
          console.log(data)
          moduleOpen(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.$emit('success')
              this.handleClose()
            }

          }).catch(() => { });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //开通店铺NFR功能
    submitfilter(formName) {
      this.$refs[formName].validate((valid) => {
        console.log('valid', valid)
        if (valid) {
          let data = {
            id: this.id,
            ...this.filter
          }
          moduleNfrOpen(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.$emit('success')
              this.handleClose()
            }

          }).catch(() => { });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //修改NFR售卡服务费率
    submitfilterEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          let data = {
            id: this.id,
            ...this.filter
          }
          updateNfrMsg(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.$emit('success')
              this.handleClose()
              this.buttonLoading = false
            }
          }).catch(() => {
            this.buttonLoading = false
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }

  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  ::v-deep input[type='number'] {
    -moz-appearance: textfield !important;
  }
}

.main {
  .text {
    line-height: 1.6;
    margin-top: 14px;
  }

  .inp {
    margin-top: 12px;
  }

  .btn {
    margin-top: 12px;
    display: flex;
    justify-content: center;
  }
}</style>
